﻿@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_Index.cshtml";
}

@model Dictionary<string,string>

<style>
    #gridList{
        width:100%;
    }

    #gridList thead th,#gridList tbody th{
        text-align:center;
    }

        #gridList tbody td, #gridList tbody th {
            vertical-align:middle;
            padding: 2px;
        }

        #gridList thead input {
            margin-top: -3px;
            vertical-align: middle;
        }

        #gridList thead i {
            margin-left: 3px;
        }

        #gridList .mk_name, #gridList .mk_desc {
            padding-left: 3px;
            width: calc(100% - 1px);
            border: 0px solid #ccc;
            border-bottom-width: 1px;
            outline: none;
        }

            #gridList .mk_name:focus, #gridList .mk_desc:focus {
                border-bottom-color: blue;
            }
</style>
<div class="gridPanel">
    <table id="gridList" class="table table-condensed">
        <colgroup>
            <col width="100" />
            <col width="100" />
            <col width="33" />
            <col width="33" />
            <col width="33" />
            <col width="30" />
        </colgroup>
        <thead>
            <tr>
                <th>
                    名称<i class="fa fa-info-circle" title="表单字段"></i>
                </th>
                <th>
                    标签<i class="fa fa-info-circle" title="表单字段名称"></i>
                </th>
                <th>
                    <input type="checkbox" id="ck_required" />必须
                </th>
                <th>
                    <input type="checkbox" id="ck_readonly" />只读
                </th>
                <th>
                    <input type="checkbox" id="ck_show" />可见
                </th>
                <th>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr style="display: none; ">
                <td><input type="text" class="mk_name" placeholder="名称" /></td>
                <td><input type="text" class="mk_desc" placeholder="标签" /></td>
                <th><input type="checkbox" class="ck_required" /></th>
                <th><input type="checkbox" class="ck_readonly" /></th>
                <th><input type="checkbox" class="ck_show" checked="checked" /></th>
                <th><a href="javascript:void(0)" onclick="removeKey(this)" title="删除"><i class="fa fa-remove fa-lg"></i></a></th>
            </tr>
            @foreach (KeyValuePair<string, string> kv in Model)
            {
            <tr id="@("mk"+kv.Key)">
                <td>@kv.Key</td>
                <td>@kv.Value</td>
                <th><input type="checkbox" class="ck_required" /></th>
                <th><input type="checkbox" class="ck_readonly" /></th>
                <th><input type="checkbox" class="ck_show" checked="checked" /></th>
                <th></th>
            </tr>
            }
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" onclick="addKey()" style="text-align:center;cursor:pointer;background-color:whitesmoke;"><i class="fa fa-plus"></i></td>
            </tr>
        </tfoot>
    </table>
</div>
<script>

    function init(k) {
        if (!k) return;
        var tr = $("#mk" + k.name);
        if (tr.length == 0) {
            tr = $("#gridList tbody tr:eq(0)").clone().show();
            tr.find(".mk_name").val(k.name);
            tr.find(".mk_desc").val(k.desc);
            $("#gridList tbody").append(tr);
        }
        tr.find(".ck_required").prop("checked", k.required);
        tr.find(".ck_readonly").prop("checked", k.readOnly);
        tr.find(".ck_show").prop("checked", k.show);
    }

    function getKeys() {
        var keys = [], ks = [];
        $("#gridList tbody tr:gt(0)").each(function (i, o) {
            var tr = $(o), k = null;
            if (tr.find(".mk_name").length > 0) {
                k = {
                    name: tr.find(".mk_name").val(),
                    desc: tr.find(".mk_desc").val(),
                    required: tr.find(".ck_required").prop("checked"),
                    readOnly: tr.find(".ck_readonly").prop("checked"),
                    show: tr.find(".ck_show").prop("checked")
                };

                if (k.name) {
                    if (ks.indexOf(k.name.toLowerCase()) > -1) {
                        throw new Error("名称[" + k.name + "]已存在");
                    }

                    ks.push(k.name.toLowerCase());
                    keys.push(k);
                }
            }
            else {
                k = {
                    name: tr.find("td:eq(0)").text(),
                    desc: tr.find("td:eq(1)").text(),
                    required: tr.find(".ck_required").prop("checked"),
                    readOnly: tr.find(".ck_readonly").prop("checked"),
                    show: tr.find(".ck_show").prop("checked")
                };

                if (ks.indexOf(k.name.toLowerCase()) > -1) {
                    throw new Error("名称[" + k.name + "]已存在");
                }
                ks.push(k.name.toLowerCase());
                keys.push(k);
            }
        });
        ks = null;
        return keys;
    }

    $(function () {
        $("#ck_required").on("change", function () {
            $("#gridList tbody tr:gt(0) .ck_required").prop("checked", $(this).prop("checked"));
        });

        $("#ck_readonly").on("change", function () {
            $("#gridList tbody tr:gt(0) .ck_readonly").prop("checked", $(this).prop("checked"));
        });

        $("#ck_show").on("change", function () {
            $("#gridList tbody tr:gt(0) .ck_show").prop("checked", $(this).prop("checked"));
        });
    });
    function removeKey(o) {
        $(o).parent().parent().remove();
    }

    function addKey() {
        $("#gridList tbody").append($("#gridList tbody tr:eq(0)").clone().show());
    }
</script>
